<template>
  <div>
    <div style="padding-bottom: 20px; color: #0000FF;" @click="closePage"><商品管理</div>
    <div class="information_edit">
      <div class="page_top padding_20">『仙剑奇侠传』X『次元造物』12寸收藏级人偶 云天河</div>
      <div class="page_content padding_20">
        <div class="content_title_flex"><span>商品数据</span><span class="right">2019.03.28-2019.03.29  ▼</span></div>
        <div class="goods_data">
          <div class="item">
            <div class="name">访问人数</div>
            <div>209,301</div>
          </div>
          <div class="item">
            <div class="name">展现次数</div>
            <div>209,301</div>
          </div>
          <div class="item">
            <div class="name">订单数</div>
            <div>209,301</div>
          </div>
          <div class="item">
            <div class="name">订单金额</div>
            <div>209,301</div>
          </div>
        </div>
      </div>
      <div class="page_content padding_20">
        <div class="content_title"><span>用户来源</span></div>

      </div>
      <div class="page_content padding_20">
        <div class="content_title"><span style="font-size: 14px;">推送分享</span>
          <span style="color: #999;font-size: 10px;font-weight: 100;margin-left: 10px;">以下渠道带有渠道监测功能，可检测该活动在不同渠道的展现及参与次数</span>
        </div>
        <div class="content_title"><span style="font-size: 14px;font-weight: 500;">手机分享</span>
          <span style="color: #999;font-size: 10px;font-weight: 100;margin-left: 10px;">支持微信/支付宝/QQ/手机浏览器等二维码识别工具直接扫码查看</span>
        </div>
        <div style="padding-bottom: 10px;">
          <img src="../../../assets/ewm.jpg" class="ewm_img" alt="">
          <div class="my_button"><span>微信分享设置</span></div>
        </div>
        <div class="content_title"><span style="font-size: 14px;font-weight: 500;">网页分享</span>
          <span style="color: #999;font-size: 10px;font-weight: 100;margin-left: 10px;">可以直接分享链接到相应媒体（邮件、QQ、微博等），或者嵌入到微信公众号菜单</span>
        </div>
        <div class="web_share">
          <div class="flex text">www.baidu.com</div>
          <div class="button"><span>复制网页链接</span></div>
        </div>
        <div class="content_title"><span style="font-size: 14px;font-weight: 500;">媒介分享</span></div>
        <div class="share_item">
          <img src="../../../assets/commodity_img/u3703.png" alt="">
          <img src="../../../assets/commodity_img/u3708.png" alt="">
          <img src="../../../assets/commodity_img/u3710.png" alt="">
          <img src="../../../assets/commodity_img/u3709.png" alt="">
          <img src="../../../assets/commodity_img/u3711.png" alt="">
        </div>
        <div class="content_title"><span style="font-size: 14px;font-weight: 500;">自定义分享</span></div>
        <div class="self_share">
          <div class="item">
            <div class="left"><span>百</span></div>
            <div class="right"><span>X</span></div>
          </div>
          <div class="add_btn"><span>+</span></div>
        </div>
      </div>

    </div>

  </div>
</template>

<script>
import { detailsDraftClean } from '@/api/information'
import tinymce from '@/components/Tinymce'
export default {
  components: { tinymce },
  props: ['editdata'],
  data() {
    return {

    }
  },
  created() {
    console.log(this.editdata)
    if (this.editdata) {
      this.informationid = this.editdata.informationid
    } else {

    }
  },
  methods: {
    beforeAvatarUpload(file) {
      console.log(file)
      this.imgFile = file.raw
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    closePage() {
      this.$parent.closeEditpage()
    }

  }
}
</script>
<style>

</style>
<style lang="less" scoped>
.padding_20{
	padding: 20px;
}

.information_edit{
	border: 1px solid #ccc;
	background: #fff;
}
.page_top{
	font-size: 16px;
	font-weight: 600;
	border-bottom: 1px solid #ccc;
}
.page_content{
	border-bottom: 1px solid #ccc;
	.goods_data{
		margin-top: 10px;
		display: flex;
		justify-content: center;
		.item{
			flex: 1;
			text-align: center;
			color: #CCCCCC;
			font-weight: 600;
			.name{
				font-size: 12px;
			}
		}
	}
}
.content_title_flex{
	font-size: 16px;
	font-weight: 600;
	padding-bottom: 10px;
	display: flex;
	justify-content: space-between;
	.right{
		font-weight: 500;
		font-size: 14px;
		color: #999;
	}
}
.content_title{
	font-size: 16px;
	font-weight: 600;
	padding-bottom: 10px;
}

.ewm_img{
	width: 80px;height: 80px;
	vertical-align: bottom;
}
.my_button{
	width: 100px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	border:1px solid #409EFF;
	color: #409EFF;
}

.web_share{
	display: flex;
	box-sizing: border-box;
	padding-bottom: 10px;
	.flex{
		flex: 1;
	}
	.text{
		border:1px solid #ccc;
		background: #f1f1f1;
		color: #999;
		padding: 10px;
	}
	.button{
		width: 140px;
		padding: 10px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		color: #fff;
		background: #0000FF;

	}
}
.share_item{
	padding-bottom: 10px;
	img{
		width: 30px;
		height: 30px;
	}
}
.self_share{
	padding-bottom: 10px;

	.item{
		height: 30px;
		border: 1px solid #0000FF;
		display:inline-flex;
		.left{
			background: #0000FF;
			color:#fff;
			width: 30px;
			display: inline-flex;
			align-items: center;
			justify-content: center;
		}
		.right{
			width: 30px;
			color: #0000FF;
			display: inline-flex;
			align-items: center;
			justify-content: center;
		}
	}
	.add_btn{
		height: 30px;
		width: 30px;
		color: #0000FF;
		border: 1px solid #0000FF;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}
.wx_set_content{
	display: flex;
	.left{
		flex: 1;
		padding-right: 10px;
		border-right: 1px solid #f1f1f1;
	}
	.right{
		flex: 1;
		padding-left: 10px;
		.pre_wrap{
			position: relative;
			width:280px;
			.bg_img{
				width: 280px;
			}
			.pic_img{
				width: 30px;height: 30px;
				position: absolute;
				top: 132px;
				left: 64px;
			}
			.pre_txt{
				position: absolute;
				top: 132px;
				left: 102px;
				width: 156px;
				font-size: 12px;
				display: -webkit-box;
				-webkit-line-clamp:2;
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-box-orient: vertical;
			}
		}

	}
}

</style>
